import { useEffect, useState, useRef } from 'react';
// 最大偏离量
const MAX_Y = 100;
// 状态
export const STATUS = {
  START: 'start', // 开始下拉刷新
  AWAIT: 'await', // 释放立即刷新
  LOADING: 'loading', // 正在刷新
  SUCCESS: 'success', // 刷新成功
  FINISH: 'finish', // 完成
};

export const TIPS = {
  [STATUS.START]: '开始下拉刷新',
  [STATUS.AWAIT]: '释放立即刷新',
  [STATUS.LOADING]: '正在刷新',
  [STATUS.SUCCESS]: '刷新成功',
};

export const usePullToRefresh = (onRefresh: () => void) => {
  // 通过Ref控制DOM,DOM上绑定touch事件
  const containerRef = useRef<HTMLDivElement>(null);
  // 下拉的状态
  const [status, setStatus] = useState(STATUS.FINISH);
  // 手指点击位置的偏移量
  const y = useRef(0);
  //
  useEffect(() => {
    if (!containerRef.current) return () => {};
    containerRef.current.ontouchstart = (e) => {
      // 阻止浏览器默认行为，下拉头部白条
      e.preventDefault();
      if (document.documentElement.scrollTop === 0) {
        y.current = e.touches[0].pageY;
      }
    };
    containerRef.current.ontouchmove = (e) => {
      e.preventDefault();
      // 只有回到顶部才可以进行下拉刷新操作
      if (document.documentElement.scrollTop === 0) {
        // 判断手指从开始位置到下拉的距离是否大于最大偏移量，大于则释放
        if (e.touches[0].pageY - y.current > MAX_Y) {
          setStatus(STATUS.AWAIT);
          return;
        }
        // 只要手指点击开始下拉后，就要开始下拉刷新
        if (e.touches[0].pageY - y.current > 0) {
          setStatus(STATUS.START);
        }
      }
      return () => {
        if (containerRef.current) {
          containerRef.current.ontouchstart = null;
          containerRef.current.ontouchmove = null;
        }
      };
    };
  }, []);
  //
  useEffect(() => {
    if (!containerRef.current) return () => {};
    containerRef.current.ontouchend = async (e) => {
      e.preventDefault();
      // 移动到最大偏移量的点
      if (status === STATUS.AWAIT) {
        setStatus(STATUS.LOADING);
        await onRefresh();
        setStatus(STATUS.SUCCESS);
        setTimeout(() => {
          setStatus(STATUS.FINISH);
        }, 500);
        return;
      }
      // 没有移动到最大偏移量,不需要做刷新操作了！！！
      setStatus(STATUS.FINISH);
    };
    return () => {
      if (containerRef.current) {
        containerRef.current.ontouchend = null;
      }
    };
    // 这里面使用了status,如何不加入到依赖项中，status永远都是初始化的值
  }, [status]);

  return {
    status,
    containerRef,
  };
};
